<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>银行账户余额变更通知</h3>
        <p>账号: 3001237890122</p>
        <p>余额为：{{count}}</p>
        支取人民币：<input type="text" v-model="money"/> &nbsp;&nbsp;
        <button type="button" @click="changeMoney()">支取{{money}}元</button>
        <p>支取后余额为:{{count}}元</p>
        <h3>支取明细</h3>
        {{detail}}
        <hr>
    </div>
    </body>
    <script type="text/javascript">
        const appCom = {
            data(){
                return{
                    money:400,
                    count:10000,//余额
                    record: [] //取款金额记录
                }
            },
            //侦听器
            watch:{
                //侦听count(余额)的变化，提示账户余额变更
                count(newValue,oldValue){
                    alert('账户余额由:'+oldValue+'变为'+newValue+'元!');
                }
            },
            //方法
            methods: {
                changeMoney(){
                    if(this.money <= 0){
                        alert('请输入正确取款余额！');
                        return;
                    }
                    if(this.money > this.count){
                        alert('余额不足，请重新输入取款金额！');
                        return;
                    }
                    //余额减少
                    this.count = this.count - this.money;
                    //记录取款金额
                    this.record.push(this.money);
                }

            },
            //计算属性
            computed:{
                //返回取款详细记录，当record值发生变化时，自动调用，并更新detail的值
                detail(){
                    let str = '';
                    for(let i = 0;i < this.record.length; i++){
                        str = str + '第' + (i+i) + '次取款：'+this.record[i] + '元';
                    }
                    return str;
                }
            }

        };
        Constapp = Vue.createApp(appCom).mount("#app");
    </script>
</html>